<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <div>
      <el-form  :inline="true"
                :model="dataForm">
          <el-form-item>
            <ejs-daterangepicker :placeholder="$t('custom.marketbot.clientUsageReport.selectDate')" style="width:200px;"
            :format="dateRangeDefaultSetting.format" v-model="dataForm.searchDate" @change="query" :strictMode="dateRangeDefaultSetting.selectionMode"
            >
            <e-presets>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisWeek')" :start='dateRangeDefaultSetting.weekStartDate' :end='dateRangeDefaultSetting.weekEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisMonth')" :start='dateRangeDefaultSetting.monthStartDate' :end='dateRangeDefaultSetting.monthEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastMonth')" :start='dateRangeDefaultSetting.lastMonthStartDate' :end='dateRangeDefaultSetting.lastMonthEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastYear')" :start='dateRangeDefaultSetting.lastYearStartDate' :end='dateRangeDefaultSetting.lastYearEndDate'></e-preset>
            </e-presets>
          </ejs-daterangepicker>
        </el-form-item>
        <el-form-item>
          <select-user-id-input @resetSearch="userChange" />
        </el-form-item>

      </el-form>
      <div class="control-section">
      <div class="content-wrapper" v-loading="loading">
      <ejs-grid :dataSource="gridDefaultSetting.dataSource"
                :allowResizing='gridDefaultSetting.allowResizing'
                :allowFiltering='gridDefaultSetting.allowFiltering'
                :filterSettings='gridDefaultSetting.filterSettings'
                :allowGrouping='gridDefaultSetting.allowGrouping'
                :allowPaging='gridDefaultSetting.allowPaging'
                :toolbar="gridDefaultSetting.toolbar"
                :allowTextWrap="gridDefaultSetting.allowTextWrap"
                :showColumnChooser='gridDefaultSetting.showColumnChooser'
                :allowReordering='gridDefaultSetting.allowReordering'
                :allowSorting='gridDefaultSetting.allowSorting'
                :load="load"
                ref="datagrid"
                >
        <e-columns>
          <e-column field='id'
                    :headerText="$t('custom.clientbot.attendance.id')"
                    width='100'></e-column>
          <e-column field='userName'
                    :headerText="$t('custom.clientbot.attendance.username')"
                    width='100'></e-column>
          <e-column field='status'
                    :headerText="$t('custom.clientbot.attendance.status')"
                    width='200'
                    ></e-column>
          <e-column field='logTime'
                    :headerText="$t('custom.clientbot.attendance.logTime')"
                    width='200'
                    :template="logTimeformat"
                    ></e-column>
          <e-column field='approveTime'
                    :headerText="$t('custom.clientbot.attendance.approveTime')"
                    width='200'
                    :template="approveTimeformat"
                    ></e-column>
          <e-column field='createTime'
                    :headerText="$t('custom.clientbot.attendance.createTime')"
                    width='200'
                    :template="createTimeformat"
                    ></e-column>
          <e-column field='source'
                    :headerText="$t('custom.clientbot.attendance.source')"
                    width='200'
                    ></e-column>
        </e-columns>
      </ejs-grid>
      <el-pagination background
                      :layout="pageOptions.layout"
                      @current-change="pageCurrentChangeHandle"
                      @size-change="pageSizeChangeHandle"
                      :page-sizes="$store.state.app.pageOptions.pageSizes"
                      :pager-count="$store.state.app.pageOptions.pageCount"
                      :current-page="pageOptions.currentPage"
                      :total="pageOptions.total">
      </el-pagination>
      </div>
    </div>
    </div>
  </el-card>
</template>

<script>
import SelectUserIdInput from '@/components/search-input/select-user-id-input'
import CreateTimeFormat from '@/components/grid-format/CreateTimeFormat.vue'
import LogTimeformat from '@/components/grid-format/LogTimeformat.vue'
import ApproveTimeformat from '@/components/grid-format/ApproveTimeformat.vue'
import moment from 'moment'
import mixinViewModule from '@/mixins/simplereport-view-module'

export default {
  mixins: [mixinViewModule],
  components: { SelectUserIdInput },
  data () {
    return {
      logTimeformat: function () {
        return { template: LogTimeformat }
      },
      approveTimeformat: function () {
        return { template: ApproveTimeformat }
      },
      createTimeformat: function () {
        return { template: CreateTimeFormat }
      },
      dataForm: {
        tenantCode: null,
        userId: null,
        descs: 'log_time'
      }

    }
  },

  created () {

  },
  methods: {
    resetDataForm () {
      this.dataForm.searchDate = [this.dateRangeDefaultSetting.weekStartDate, this.dateRangeDefaultSetting.weekEndDate]
    },

    load (item) {
      this.grid = this.$refs.datagrid
      this.query()
    },

    getDataListAPI () {
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        current: this.pageOptions.currentPage,
        size: this.pageOptions.pageSize,
        userId: this.dataForm.userId
      }
      if (this.dataForm.searchDate && this.dataForm.searchDate.length >= 2) {
        params.createDateFrom = moment(this.dataForm.searchDate[0]).format('YYYY-MM-DD') + 'T00:00:00'
        params.createDateTo = moment(this.dataForm.searchDate[1]).format('YYYY-MM-DD') + 'T23:59:59'
      } else {
        delete params.createDateFrom
        delete params.createDateTo
      }

      return this.$interface.attendance.getRecordListApi(params)
    },
    userChange (e) {
      this.dataForm.userId = e
      this.query()
    }

  }
}

</script>

<style scoped>
.e-row{
  word-break: break-word;
}
</style>
